<template>
  <main
    class="w-screen h-screen overflow-hidden"
    :class="{ 'rounded-full': config.rounded }"
  >
    <video
      ref="videoRef"
      class="object-cover h-full"
      :class="{ 'rounded-full': config.rounded }"
      :style="`border: solid ${config.borderWidth || '0px'} ${config.borderColor}`"
    ></video>
  </main>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useConfigStore } from '@renderer/stores'

const { config } = useConfigStore()

const constraints: MediaStreamConstraints = {
  audio: false,
  video: {
    deviceId: config.deviceId,
    width: { min: 1280 },
    height: { min: 720 }
  }
}

const videoRef = ref()
let mediaStreamTrack: MediaStreamTrack[] = [] // 用于存储媒体流轨道集合

onMounted(() => {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      mediaStreamTrack = stream.getTracks()
      const video = videoRef.value as HTMLVideoElement
      video.srcObject = stream
      video.onloadedmetadata = function () {
        video.play()
      }
    })
    .catch(function (err) {
      console.log(err.name + ': ' + err.message)
    })
})

onUnmounted(() => {
  mediaStreamTrack.forEach(function (track) {
    track.stop()
  })
})
</script>

<style lang="scss"></style>
